<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<%@page import="javax.jdo.PersistenceManager"%>
<%@page import="kr.icg.mshtest2.PMF"%>
<%@page import="kr.icg.mshtest2.Mention"%>
<%@page import="java.util.List"%>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Hello App Engine</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  function initialize() {
	  var latlng = new google.maps.LatLng(33.499621, 126.531188);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	var image = '/images/flight.png';
	
       

    
<%   
	PersistenceManager pm = PMF.get().getPersistenceManager(); 
	String query = "select from " + Mention.class.getName() + " order by date desc limit 10";
	List<Mention> Mentions = (List<Mention>) pm.newQuery(query).execute();
	if (!Mentions.isEmpty()) 
	{
		int i=0;
		for (Mention m : Mentions) { 		
	%>
		var contentString = "<form><input type='text' value='<%=m.getContent()%>' style='font-size:20px; font-weight:900'></form>";
	
	    var infowindow = new google.maps.InfoWindow({
	        content: contentString
	    });
	    
	      var latlng = new google.maps.LatLng(<%=m.getLatitude()%>,<%=m.getLongitude()%>);
	      var marker<%=i%> = new google.maps.Marker({
		      position: latlng,
		      draggable: true,
		      map: map,
		      icon: image,
		      title: '<%=m.getContent()%>'
          });		          
		
	
		google.maps.event.addListener(marker<%=i%>, 'click', function() {
	        infowindow.open(map, marker<%=i%>);
	    });

	    google.maps.event.addListener(marker<%=i%>, 'dragend', function() {
	        
	    });
	<%
			i++;
		}
	}
	else
	{
	%>
		
	
	
		var contentString = "<form><input type='text' value='메세지를 입력하세요.' style='font-size:20px; font-weight:900'></form>";
		
	    var infowindow = new google.maps.InfoWindow({
	        content: contentString
	    });
	    
	    var latlng = new google.maps.LatLng(33.499621, 126.531188);
	      var marker = new google.maps.Marker({
		      position: latlng,
		      draggable: true,
		      map: map,
		      icon: image,
		      title: 'Hello World!'
	    });	
		google.maps.event.addListener(marker, 'click', function() {
	        infowindow.open(map, marker);
	    });
	
	    google.maps.event.addListener(marker, 'dragend', function() {
	        
	    });
	
	
	
	
    <%
	}
	
%>
	

  }

</script>
  </head>

  <body onload="initialize()" style="margin:0px">
  	  <div id="asdf">fff</div>
      <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
